<template>
  <div class="UserLogins">
    <div class="userName" style="width:85%;"></div>
    <div class="userName" style="flex: 1;display: flex;justify-content: center;align-items: center;">
      <img src="../assets/img/user.png" alt="" class="rightLogo" width="25" height="25">
      <el-dropdown trigger="click">
        <div class="el-dropdown-link">
          <el-tooltip class="item" effect="dark" :content="accountRealName" placement="top">
            <span class="account">{{ accountRealName }}</span>
          </el-tooltip>
          <i class="el-icon-arrow-down"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item @click.native="handleSystem">系统配置</el-dropdown-item> -->
          <el-dropdown-item @click.native="systemInformation">系统信息</el-dropdown-item>
          <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-badge :value="$store.state.MessageCount || total" :max="99" class="messageDB" @click.native="needToBeDealtWith"
        :hidden="$store.state.MessageCount || total ? false : true">
        <img src="../assets/img/tongzhi.png" alt="" width="25" height="25" class="news">
      </el-badge>
    </div>
    <!-- 系统信息弹窗 -->
    <LsdDialog :dialogConfig="dialogConfig1" @handleBtn="handleBtn1" @close="close1">
      <div class="updr" slot="dialog">
        <el-form :label-position="labelPosition" label-width="150px">
          <el-form-item label="系统名称：">
            <div>湖北省新一代应急指挥系统</div>
          </el-form-item>
          <el-form-item label="版本号：">
            <div>V1.2正式版</div>
          </el-form-item>
          <el-form-item label="技术支持：">
            <div>华中电力科技开发有限责任公司</div>
          </el-form-item>
          <el-form-item label="服务电话：">
            <div>027-xxxxxxxxxx</div>
          </el-form-item>
        </el-form>
      </div>
    </LsdDialog>
  </div>
</template>

<script>
const ISC_PREFIX_API = process.env.VUE_APP_ISC_URL;
const loginUrl = ISC_PREFIX_API + "/isc_sso/login";
const ISC_LOGIN_URL = loginUrl + "?service=";
import {
  listPage
} from "@/api/EarlyWarningManagement/xxdb";
export default {
  name: "UserLogins",
  data() {
    return {
      roleName: "",
      accountRealName: "",
      total: 0,
      labelPosition: "right",
      //   系统信息-弹窗
      dialogConfig1: {
        title: "系统信息",
        isShow: false,
        width: "30%",
        btnList: [
          // {
          //   name: "导入数据",
          //   id: "importSave", // 事件名
          //   size: "small",
          //   type: "primary"
          // },
          // {
          //   name: "取消",
          //   id: "getBack", // 事件名
          //   size: "small"
          // }
        ]
      }
    };
  },
  created() {
    this.getRoleName();
  },
  computed: {
    IscLoginStatus() {
      return this.$store.state.IscLoginStatus;
    }
  },
  watch: {
    IscLoginStatus() {
      this.getRoleName();
    }
  },
  methods: {
    getRoleName() {
      const role = sessionStorage.getItem("role");
      const account = sessionStorage.getItem("account");
      if (role && account) {
        this.roleName = JSON.parse(role).roleName;
        this.accountRealName = JSON.parse(account).realName;
        this.loadData(JSON.parse(account).id);
      }
    },
    // 系统信息
    systemInformation() {
      this.dialogConfig1.isShow = true;
    },
    // 退出登录
    loginOut() {
      sessionStorage.clear();
      if (process.env.NODE_ENV === "production") {
        const addr = window.location.href;
        const url = addr.substring(0, addr.indexOf("/", addr.indexOf("/") + 2)) + "/hb-ecs";
        window.location.href = ISC_LOGIN_URL + url;
        return;
      }
      this.$router.push({ path: "/Login" });
      this.$message({
        message: "退出成功",
        type: "success"
      });
    },
    handleSystem() {
      this.$store.commit("SET_MenuIndex", "");
      this.$router.push({ path: "/SystemConfig/Organization" });
    },
    // 待办
    needToBeDealtWith() {
      if (this.$route.path === "/MessageAgentList") {
        this.$router.go(-1);
      } else {
        this.$router.push({ path: "/MessageAgentList" });
      }
    },
    async loadData(id) {
      const parmas = {
        pageNum: 1,
        pageSize: 10,
        issueUserId: id
      };
      const res = await listPage(parmas);
      this.total = res.total;
    },
    handleBtn1(item) {
      this[item.id]();
    },
    //  系统信息弹窗 关闭
    close1() {
      this.dialogConfig1.isShow = false;
    }
  }
};

</script>

<style scoped lang="less">
.UserLogins {
  display: flex;
  // height: 84px;
  height: 9%;

  .userName {
    padding: 18px 0;
    align-content: center;
    vertical-align: middle;

    .rightLogo {
      margin-right: 10px;
    }

    .news {
      margin-left: 10px;
    }

    .el-dropdown-link {
      margin-left: 5px;
      font-size: 18px;
      // font-weight: bold;
      color: #96c0e0;
      font-family: "微软雅黑";
      white-space: nowrap;
      cursor: pointer;
      max-width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;

      .account {
        display: inherit;
        max-width: 140px;
        // text-decoration: underline;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 5px;
      }
    }
  }
}

.el-dropdown-link {
  color: #fff;
}

.messageDB {
  cursor: pointer;
}

/deep/ .el-dialog__wrapper {
  top: 100px !important;

  .el-dialog {
    height: 36% !important;
  }
}

/deep/ .el-dialog__body {
  height: 200px !important;
}

.updr {
  margin-top: 20px;

  /deep/ .el-form-item {
    margin-bottom: 0;
  }

  /deep/ .el-form-item__label {
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }

  /deep/ .el-form-item__content {
    font-size: 16px;
    font-weight: bold;
  }

  div {
    color: #02a7f0;
  }
}
</style>
